<template>
  <fieldset>
    <legend>产品</legend>
    <h1>{{$store.state.Product.tag}}</h1>
        <ul>
            <li v-for="item in products" :key="item.id">
              <span>产品名称：</span>
              <b>{{item.title}}</b>
              &nbsp;&nbsp;&nbsp;
              <span>产品单价：</span>
              <b>{{item.price}}</b>
              &nbsp;&nbsp;&nbsp;
              <span>库存：</span>
              <b>{{item.inventory}}</b>
              &nbsp;&nbsp;&nbsp;
              <button :disabled="item.inventory==0" @click="acart(item)">加入购物车</button>
            </li>
        </ul>
  </fieldset>
</template>

<script>
import {mapActions,mapState} from "vuex"
export default {
  mounted(){
    // this.$store.commit("Product/SET_PRODUCT");
    // console.log(this)
    this["Product/FETCH_PRODUCT"]()
  },
  computed:{
    ...mapState("Product",["products"])
  },
  methods: {
    // ...mapActions("Product",["FETCH_PRODUCT"]),
    ...mapActions(["Product/FETCH_PRODUCT","Cart/GET_PRODUCT"]),
    acart(item){
      // this.DECREMENT_INVENTORY(item)
      this["Cart/GET_PRODUCT"](item);
    }
  },
}
</script>

<style>

</style>